<template>
  <a-card :bordered="false">
    <a-modal
      title="更新用户信息"
      style="top: 20px;"
      :width="800"
      v-model="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-form
        :form="form"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-form-item
          label="唯一识别码"
          v-show="false"
          required>
          <a-input
            type="text"
            placeholder="唯一识别码"
            v-decorator="['id',{initialValue: mdl.id, rules: [
              {required: true,message: '唯一识别码不能为空'}
            ]}]"
            disabled="disabled"
            id="id"/>
        </a-form-item>
        <a-form-item
          label="用户昵称"
          required>
          <a-input
            type="text"
            placeholder="起一个名字"
            v-decorator="['nickname',{initialValue: mdl.nickname, rules: [
              {required: true,message: '用户昵称不能为空'},
              {max: 50,message: '用户昵称不能超过50个字'}
            ]}]"
            id="nickname"/>
        </a-form-item>
        <a-form-item
          label="状态"
          required>
          <a-radio-group
            v-decorator="['gender',{initialValue: mdl.gender === 'UNKNOWN' ? '' : mdl.gender, rules: [{required: true, message: '性别未选择'}]}]">
            <a-radio value="MALE">男</a-radio>
            <a-radio value="FEMALE">女</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="用户角色"
          required>
          <a-select
            mode="multiple"
            style="width: 100%"
            v-decorator="['roleIds',{initialValue: mdl.roles, rules: [{required: true, message: '角色未选择'}]}]"
            placeholder="请选择用户角色">
            <a-select-option
              v-for="role in roles"
              :key="role.roleId">
              {{ role.roleName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="所属部门">
          <a-tree-select
            style="width: 100%"
            v-decorator="['deptId',{initialValue: mdl.deptId}]"
            :treeData="deptTreeList"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="所属部门">
          </a-tree-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>
<script>
  import { updateUserInfo } from '@/api/user'
  import { getRoleList, getDeptTreeList } from '@/api/manage';
  import ATreeSelect from 'ant-design-vue/es/tree-select';
  import ATree from 'ant-design-vue/es/tree';

  export default {
    name: 'UserUpdateModal',
    components: {
      ATree,
      ATreeSelect
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        mdl: {},
        form: this.$form.createForm(this, {}),
        treeData: [],
        roles: [{ 'roleId': 'undefined', 'roleName': '无' }],
        deptTreeList: []
      }
    },
    beforeCreate () {

    },
    created () {
    },
    watch: {
    },
    methods: {
      show (record) {
        getRoleList().then(res => {
          console.log('getRoleList.call():', res)
          this.roles = res.data;
        })
        getDeptTreeList().then(res => {
          console.log('getDeptTreeList.call():', res)
          this.deptTreeList = res.data;
        })
        this.edit(record)
        this.visible = true
      },
      edit (record) {
        this.mdl = Object.assign({}, record)
      },
      close () {
        this.visible = false
        // 清空更新表单参数
        this.form.resetFields();
        this.$emit('close');
      },
      handleOk () {
        const _this = this
        // 触发表单验证
        _this.form.validateFields((err, fieldsValue) => {
          // 验证表单没错误
          if (!err) {
            console.log('form values', fieldsValue)
            _this.confirmLoading = true
            updateUserInfo(fieldsValue).then(res => {
              if (res) {
                _this.$message.success('保存成功');
              } else {
                _this.$message.warning('保存失败');
              }
            }).finally(() => {
              _this.confirmLoading = false;
              _this.close()
            });
          }
        })
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>
